<template>
    <span>{{time | timer }}</span>
</template>

<script>
export default {
  name: 'Clocker',
  props: {
    kid: {
      type: Number|String, 
      required: true
    }
  },

  data: ()=>({
    time: 0,
    handler: null
  }),

  mounted() {
    this.time = 0
    this.handler = setInterval(()=>{
      this.time += 1
    }, 1000)
  }, 

  watch: {
    time(val) {
      this.$emit('update-time', [val, this.kid])
    }
  },
  
  beforeDestroy() {
    if(this.handler)
      clearInterval(this.handler)
  },
  
  filters: {
    timer(val) {
      if (!val) return val;
      val = parseInt(val);
      let hour = 0;
      let min = 0;
      let second = 0;
      if (val > 60) {
        min = Math.floor(val / 60);
        second = parseInt(val % 60);
        if (min > 60) {
          hour = Math.floor(min / 60);
          min = parseInt(min % 60);
        }
      }else{
        second = val
      }
      return `${hour > 9 ? hour : "0" + hour}:${min > 9 ? min : "0" + min}:${
        second > 9 ? second : "0" + second
      }`;
    }
  },
}
</script>

<style>

</style>
